<template>
  <div class="header">

    <!-- 信息中心 -->

    <div class="Information-Center">
      <div style="margin:-40px 0 10px 5px;color:#fff;">首页</div>
      <!-- 接单信息 -->
      <div class="Center">
        <div class="btn1">
          <div class="gh">工号:</div>
        </div>
        <div class="btn2">
          <div style="text-align:center;">
            <div style="font-size:25px">22</div>
            <div>&nbsp;</div>
            <div>今日</div>
          </div>
          <div style="padding-left: 20px;text-align:center;">
            <div style="font-size:25px">22</div>
            <div>&nbsp;</div>
            <div>月单</div>
          </div>
        </div>

        <div class="btn3"
             @click="WorksheetClick">
          <div class="yc">异常：0</div>
          <div class="lsdd">
            历史订单
            <van-image width="10"
                       height="10"
                       src="https://z3.ax1x.com/2021/11/12/IBZtLn.png" />
            <van-image width="10"
                       height="10"
                       src="https://z3.ax1x.com/2021/11/12/IBZtLn.png" />
          </div>

        </div>
      </div>
      <!-- 已接单： -->
      <div class="task">
        <div style="margin:5px 0 0 5px;display:flex;font-size:15px">
          已接单
          <div style="margin-left:290px">5</div>
        </div>

        <div class="examine">
          <div style="margin:5px 0 0 5px;color:rgb(16, 125, 237);">维修中</div>
          <div>
            <van-swipe-cell style="margin-top:8px">
              <template #left>
                <!-- <van-button square
                                type="primary"
                                text="选择" /> -->
              </template>
              <van-cell :border="false"
                        title="单号:xxxxxx" />
              <template #right>
                <van-button square
                            type="primary"
                            text="增加人员" />
                <!-- <van-button square
                            type="primary"
                            text="查看详单" /> -->
                <van-button square
                            type="danger"
                            text="退单" />
              </template>
            </van-swipe-cell>
          </div>
        </div>
        <!-- 过审单 -->
        <div class="examine">
          <div style="margin:5px 0 0 5px;color:rgb(16, 125, 237);">过审单</div>
          <div>
            <van-swipe-cell style="margin-top:8px">
              <van-cell :border="false"
                        title="单号:xxxxxx" />
              <template #right>
                <van-button square
                            type="primary"
                            text="开始维修"
                            @click="kswx" />
                <van-button square
                            type="primary"
                            text="增加人员" />
                <van-button square
                            type="primary"
                            text="查看详单"
                            @click="ckxd" />
                <van-button square
                            type="danger"
                            text="退单" />
              </template>
            </van-swipe-cell>
          </div>
        </div>
        <!-- 审核中 -->
        <div class="examine">
          <div style="margin:5px 0 0 5px;color:rgb(16, 125, 237);">审核中</div>
          <div>
            <van-swipe-cell style="margin-top:8px">
              <van-cell :border="false"
                        title="单号:xxxxxx" />
              <template #right>
                <van-button square
                            type="danger"
                            text="查看详情" />
                <van-button square
                            type="primary"
                            text="退单" />

              </template>
            </van-swipe-cell>
          </div>
        </div>
      </div>
    </div>

    <Footer page="index"></Footer>
  </div>
</template>

<script>
import Footer from '@/components/Footer'
// import { Notify } from 'vant'
import { Sidebar, SidebarItem } from 'vant'
import Vue from 'vue'
import { TreeSelect } from 'vant'
import { Divider } from 'vant'
Vue.use(TreeSelect)
Vue.use(Divider)

import { SwipeCell } from 'vant'

Vue.use(SwipeCell)

// import { Tabbar, TabbarItem } from "vant";
// import { Tab, Tabs } from "vant";

export default {
  // components: {
  //   [Tab.name]: Tab,
  //   [Tabs.name]: Tabs
  // },
  components: {
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    Footer
  },
  data() {
    return {
      active: 0,
      list: [],
      list2: [],
      activeKey: 0,
      actives: 0,
      items: [{ text: '维保单' }, { text: '已完成单' }]
    }
  },
  created() {
    let index = this.active + 1
    this.list = this[`list${index}`] // this.list1
    // this.getGoods();
  },
  methods: {
    onchange(index) {
      // console.log(index, 'index', this.active, 'active')
      this.list = this[`list${index + 1}`]
    },
    onChange2(index) {
      // 弹框提示：
      // Notify({ type: 'primary', message: index })
    },

    getGoods() {
      let url = '/goods' // /api/goods
      this.$axios
        .get(url)
        .then(res => {
          console.log('res', res)
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    // 点击查看详情
    WorksheetClick() {
      // console.log('点击查看详情') // 跳转
      this.$router.push('/Received')
    },
    // 已完成单查看详情
    chakan() {
      this.$router.push('/details')
    },
    kswx() {
      this.$router.push('/photograph')
    },
    ckxd() {
      this.$router.push('/request')
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>